<template>
  <div class="white-bg commonBoxmp"  >
    <TableV2
      :apiFunction="listUser"
      selection
      :operation="state.operation"
      @selection-change="handleselectionChange"
     ref="tableV2Ref"
      :columns="state.columnData"
    >
    </TableV2>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import testAttributes from "/@/views/table/component/testAttributes.vue";
import selectV2 from "/@/components/selectV2/index.vue";
// import {
//   listUser,
//   getUser,
//   delUser,
//   addUser,
//   updateUser,
//   resetUserPwd,
//   changeUserStatus,
//   deptTreeSelect,
// } from "./api";

const router = useRouter();
const route = useRoute();

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装,
ref定义的数据访问的时候要多一个.value
*/
const dialogVisible = ref(true);
const tableV2Ref = ref();

const state = reactive<{
 columnData: TableColumn[],
 operation:TableColumn,
 loading: boolean
}>({
    columnData: [
    {
      label: "用户名称",
      prop: "userName",
       visible:true,
   
          renderHeader: ({column}:any) => {
            return (      <filterBox
              title={column.label}
              valueKey={column.property}
              flterType="input"
              onChange={tableV2Ref.value.handleFilterBox}
              data={tableV2Ref.value.formFilter}
            ></filterBox>)
          },
          
    },
    {
      label: "用户昵称",
      prop: "nickName",
       visible:true,
             renderHeader: ({column}:any) => {
            return (      <filterBox
              title={column.label}
              valueKey={column.property}
              flterType="input"
              onChange={tableV2Ref.value.handleFilterBox}
              data={tableV2Ref.value.formFilter}
            ></filterBox>)
          }
    },
    {
      label: "部门",
      prop: "dept.deptName",
       visible:true,
    },
    {
      label: "子集",
       visible:true,
      prop: "children",
     children: [
        {
          label: "用户名称",
           visible:true,
          prop: "userName",
          render:({row}:any)=>{
            return ( <div>{row.userName}</div>)
          }
          },
        {
          label: "用户昵称",
          prop: "nickName",
           visible:true,
        },
        {
          label: "部门",
          prop: "dept.deptName",
           visible:true,
        },
     ]
    },
    {
      label: "手机号",
      prop: "phonenumber",

       visible:true,
    },
    {
      label: "状态",
      prop: "status",
       visible:true,
    },

   
  ],
  loading: false,
  operation: {
      label: "操作",
      prop: "操作",
      width: "180",
      fixed: "right",
      visible:true,
      render:({row}:any)=>{
        return ( <div>
          <el-button type="primary" size="small" >编辑</el-button>
          <el-button type="danger" size="small" >删除</el-button>
        </div>)
      }
    }
});


onMounted(() => {});
</script>

<style scoped lang="scss"></style>
